<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: header}">
</head>
<body>
<!-- Page Content -->
<div class="container my-4">

    <div class="row">

        <!-- 左侧栏目 -->
        <div class="col-md-4 col-xl-3">
            <div th:replace="~{userzone/fragments/userset :: userset}"></div>
        </div>
        <!-- 右侧栏目 -->

        <div class="col-md-8 col-xl-9">
            <!-- 个人设置 -->
            <div class="card">
                <h5 class="card-header"><i class="fa fa-cog" aria-hidden="true"></i> 密码修改</h5>
                <div class="card-body">
                    <!--method="post"  th:action="@{'/user/'+ ${#authentication.name}+'/updateProfile'}"-->
                    <form id="userForm">
                        <!--<input type="hidden" name="username" id="id" th:value="${#authentication.name}">-->
                        <div class="form-group ">
                            <label for="username" class="col-form-label">账号</label>
                            <input type="text" class="form-control" id="username" name="username"
                                   th:value="${user.username}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="oldPassword" class="col-form-label"><span class="text-danger">*</span>旧密码</label>
                            <input type="password" class="form-control" id="oldPassword" name="oldPassword"
                                    minlength="2" maxlength="20"
                                   placeholder="请输入旧密码">
                        </div>
                        <div class="form-group">
                            <label for="newPassword1" class="col-form-label"><span class="text-danger">*</span>新密码</label>
                            <input type="password" class="form-control" id="newPassword1" name="newPassword"
                                    minlength="6" maxlength="20"
                                   placeholder="请输入新密码，字母和数字结合">
                        </div>
                        <div class="form-group">
                            <label for="newPassword2" class="col-form-label"><span class="text-danger">*</span>确认密码</label>
                            <input type="password" class="form-control" id="newPassword2"
                                   minlength="6" maxlength="20"
                                   placeholder="确认密码">
                        </div>
                        <div class="form-group">
                            <button type="button" id="rePassword-btn" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.container -->
<!--编辑头像 弹出层-->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog"
     aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabel">编辑头像</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="avatarFormContainer">
                <!--头像-->
                <style>
                    .cropImg {
                        position: relative;
                        width: 100%;
                        height: 300px;
                        background-color: #ccc;
                        color: #fff;
                        line-height: 300px;
                        text-align: center;
                        border: 1px dashed rgba(0, 0, 0, .4);
                    }

                    .cropImg > img {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        -webkit-transform: translate3d(-50%, -50%, 0);
                        -moz-transform: translate3d(-50%, -50%, 0);
                        -ms-transform: translate3d(-50%, -50%, 0);
                        -o-transform: translate3d(-50%, -50%, 0);
                        transform: translate3d(-50%, -50%, 0);
                    }
                </style>


                <div id="cropImg" class="cropImg">
                    <span>图片剪切</span>
                    <img src="">
                </div>
                <div class="crop" id="crop">
                    <input type="file" accept="image/*" class="crop-input">
                    <div class="crop-mask"></div>
                    <div class="crop-wrap">
                        <div class="crop-wrap-content">
                            <div class="crop-wrap-thum"></div>
                            <div class="crop-wrap-spinner">Loading...</div>
                        </div>
                        <div class="crop-wrap-group">
                            <a href="javascript:;" class="croped">剪切</a>
                        </div>
                        <div class="crop-wrap-group">
                            <a href="javascript:;" class="zoomIn">放大</a>
                            <a href="javascript:;" class="zoomOut">缩小</a>
                        </div>

                    </div>
                </div>
                <form  enctype="multipart/form-data"  id="avatarformid"  >
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" th:attr="avatarUsername=${user.username}"   id="submitEditAvatar">提交</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div th:replace="~{fragments/footer :: footer}">...</div>
<script th:src="@{/js/userzone/profile.js}"></script>

<script th:inline="javascript">
    // 获取 CSRF Token
    var csrfToken = $("meta[name='_csrf']").attr("content");
    var csrfHeader = $("meta[name='_csrf_header']").attr("content");
    var loginUsername = [[${#authentication.name}]];
    var rePasswordUrl = "/user/" + loginUsername + "/rePassword";

    //修改用户密码
    $("#rePassword-btn").click(function () {
        //check

        var oldPassword = $("#oldPassword").val().trim();
        if (oldPassword.length <= 0) {
            toastr.error('请输入旧密码', '错误提示');
            $("#oldPassword").focus();
            return false;
        }
        var newPassword1 = $("#newPassword1").val().trim();
        if (newPassword1.length <= 0) {
            toastr.error('请输入新密码', '错误提示');
            $("#newPassword1").focus();
            return false;
        }
        var newPassword2 = $("#newPassword2").val().trim();
        if (newPassword2.length <= 0) {
            toastr.error('请输入确认密码', '错误提示');
            $("#newPassword2").focus();
            return false;
        }
        if (newPassword1 != newPassword2){
            toastr.error('两次密码输入不一致', '错误提示');
            $("#newPassword1").val("");
            $("#newPassword2").val("");
            $("#newPassword1").focus();
            return false
        }
        var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        if (!pwdReg.test(newPassword1)){
            toastr.error('新密码格式不正确', '错误提示');
            $("#newPassword1").val("");
            $("#newPassword2").val("");
            $("#newPassword1").focus();
            return false;
        }

        $.ajax({
            url: rePasswordUrl,
            type: 'POST',
            data: $("#userForm").serialize(),
            beforeSend: function (request) {
                request.setRequestHeader(csrfHeader, csrfToken); // 添加  CSRF Token
            },
            success: function (data) {
                if (data.status == 200) {
                    toastr.success(data.message);
                } else {
                    toastr.error(data.message);
                }
            },
            error: function () {
                toastr.error("error!");
            }
        });
    });

    <!--上传头像-->
    var crop = document.querySelector('#cropImg');
    var cropNote = crop.querySelector('span');
    var cropImg = crop.querySelector('img');

    var cropper = new Cropper({
        el: '#crop',
        cp: '#cropImg',
        callback: function (dataURL, dataBlob) {
            cropNote.style.display = 'none';
            cropImg.style.display = 'block';
            cropImg.src = dataURL;
        }
    });

</script>
</body>
</html>